import React, {useRef, useState} from "react";
import {request} from "../../utils/Http";
import {deviceType, page} from "../../utils/Const";
import {ProTable} from "@ant-design/pro-components";

const Data = () => {
    const ref = useRef();
    const [deviceTypeKey, setDeviceTypeKey] = useState('1');
    const columns = [
        {
            title: '数据编号',
            dataIndex: 'id',
            valueType: 'string',
            hideInSearch: true,
            hideInTable: true,

        },
        {
            title: '设备编号',
            dataIndex: 'deviceCode',
            valueType: 'string',
            editable: true,
        },
        {
            title: '设备名称',
            dataIndex: 'deviceName',
            valueType: 'string',
            editable: false,
        },
        {
            title: '上报时间',
            dataIndex: 'reportTime',
            valueType: 'dateTime',
            hideInSearch: true,
            editable: false,
        },
    ];
    const [deviceDataColumns, setDeviceDataColumns] = useState([...columns, ...deviceType.find(obj => obj.value === '1').columns]);
    return (
        <ProTable
            columns={deviceDataColumns}
            rowKey='id'
            actionRef={ref}
            search={{
                labelWidth: 80,
                // 不同的屏幕尺寸的不同适配
                span: {
                    xs: 24,
                    sm: 24,
                    md: 12,
                    lg: 12,
                    xl: 8,
                    xxl: 4,
                }
            }}
            request={async (params) => {
                page.pageSize = params.pageSize;
                page.pageCurr = params.current;
                delete params.current
                params = {...page, ...params}
                // 获取数据,注意同步异步的问题
                const data = await request.post({
                    url: "device/data-page-type/" + deviceTypeKey,
                    params: params,
                }).then(res => {
                    return res.data
                }).catch(err => {
                    // 这里是错误回调
                    console.log(err)
                })
                return {
                    total: data.total,
                    success: true,
                    data: data.records,
                };
            }}
            dateFormatter="string"
            headerTitle="数据列表"
            toolbar={{
                menu: {
                    type: 'dropdown',
                    activeKey: deviceTypeKey,
                    items: deviceType,
                    onChange: (key) => {
                        setDeviceTypeKey(key);
                        let cols = deviceType.find(obj => obj.value === key).columns
                        console.log(cols)
                        setDeviceDataColumns([...columns, ...cols])

                        ref.current?.reload();

                    },
                },
            }}

        />
    )
}

export default Data;